/**
 * 导航栏高度 Composition API Hook
 * 用于在Vue组件中方便地使用导航栏高度
 */

import { ref, onMounted } from 'vue'
import { initNavbarHeight, getNavbarHeightCss, getNavbarHeight, getNavbarInfo } from '@/utils/navbar'

/**
 * 导航栏高度Hook
 * @returns {object} 包含导航栏相关数据和方法的对象
 */
export function useNavbar() {
    // 响应式数据
    const navbarHeightCss = ref('200rpx') // CSS字符串
    const navbarHeight = ref(200) // 数值
    const statusBarHeight = ref(0)
    const pureNavbarHeight = ref(88)
    const isLoaded = ref(false)

    // 初始化导航栏高度
    const initHeight = async () => {
        try {
            const info = await initNavbarHeight()

            // 更新响应式数据
            navbarHeight.value = info.totalHeight
            navbarHeightCss.value = `${info.totalHeight}rpx`
            statusBarHeight.value = info.statusBarHeight
            pureNavbarHeight.value = info.navBarHeight
            isLoaded.value = true

            console.log('导航栏高度初始化完成:', info)
        } catch (error) {
            console.error('导航栏高度初始化失败:', error)
            isLoaded.value = true
        }
    }

    // 组件挂载时初始化
    onMounted(() => {
        initHeight()
    })

    // 获取当前高度信息
    const getCurrentInfo = () => {
        return getNavbarInfo()
    }

    // 重新计算高度
    const recalculate = async () => {
        isLoaded.value = false
        await initHeight()
    }

    return {
        // 响应式数据
        navbarHeightCss,      // CSS字符串，如 "200rpx"
        navbarHeight,         // 数值，如 200
        statusBarHeight,      // 状态栏高度
        pureNavbarHeight,     // 纯导航栏高度
        isLoaded,            // 是否加载完成

        // 方法
        initHeight,          // 初始化方法
        getCurrentInfo,      // 获取当前信息
        recalculate         // 重新计算
    }
}

/**
 * 简化版Hook - 只返回CSS高度字符串
 * @returns {object} 包含CSS高度字符串的响应式对象
 */
export function useNavbarHeight() {
    const navbarHeightCss = ref('200rpx')
    const isLoaded = ref(false)

    onMounted(async () => {
        try {
            await initNavbarHeight()
            navbarHeightCss.value = getNavbarHeightCss()
            isLoaded.value = true
        } catch (error) {
            console.error('导航栏高度获取失败:', error)
            isLoaded.value = true
        }
    })

    return {
        navbarHeightCss,
        isLoaded
    }
} 